import { FileTextOutlined, SettingOutlined } from '@ant-design/icons';
import { Tabs } from 'antd';
import { FC, useEffect, useState } from 'react';
import PropForm from './rightPropForm';
import PageSetting from './PageSetting';
import { useEditorStore } from '@/store/editor';

type TabItem = {
  key: 'prop' | 'setting';
  label: any;
  children: any;
};

const RightPanel: FC = () => {
  const [active, setActive] = useState<TabItem['key']>('prop');
  const { selectedId, select } = useEditorStore();

  useEffect(() => {
    if (selectedId) {
      setActive('prop');
    } else {
      setActive('setting');
    }
  }, [selectedId]);

  const tableComponent: TabItem = {
    key: 'prop',
    label: (
      <span>
        <FileTextOutlined />
        属性
      </span>
    ),
    children: <PropForm />,
  };

  const tableLayer: TabItem = {
    key: 'setting',
    label: (
      <span onClick={() => select('')}>
        <SettingOutlined />
        页面设置
      </span>
    ),
    children: <PageSetting />,
  };

  const tableItems = [tableComponent, tableLayer];

  return <Tabs items={tableItems} activeKey={active} />;
};

export default RightPanel;
